@page "/components/carousel"

<h3>Carousel</h3>
<BootstrapCarousel @ref="@carousel1" ShowIndicators>
    <BootstrapSwipeArea OnSwipe="@OnSwipeCarousel1">
        <BootstrapCarouselItem Default>
            <ChildContent>
                <svg class="d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img"
                    aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false">
                    <title>Placeholder</title>
                    <rect width="100%" height="100%" fill="#777"></rect>
                </svg>
            </ChildContent>
            <CaptionContent>
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </CaptionContent>
        </BootstrapCarouselItem>
        <BootstrapCarouselItem>
            <ChildContent>
                <svg class="d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img"
                    aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false">
                    <title>Placeholder</title>
                    <rect width="100%" height="100%" fill="#666"></rect>
                </svg>
            </ChildContent>
            <CaptionContent>
                <h5>Second slide label</h5>
                <p>Some representative placeholder content for the second slide.</p>
            </CaptionContent>
        </BootstrapCarouselItem>
        <BootstrapCarouselItem>
            <ChildContent>
                <svg class="d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img"
                    aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false">
                    <title>Placeholder</title>
                    <rect width="100%" height="100%" fill="#555"></rect>
                </svg>
            </ChildContent>
            <CaptionContent>
                <h5>Third slide label</h5>
                <p>Some representative placeholder content for the third slide.</p>
            </CaptionContent>
        </BootstrapCarouselItem>
    </BootstrapSwipeArea>
</BootstrapCarousel>

<h3>Crossfade Carousel</h3>
<BootstrapCarousel Crossfade ShowIndicators Autoplaying>
    <BootstrapCarouselItem Default>
        <ChildContent>
            <svg class="d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img"
                aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Placeholder</title>
                <rect width="100%" height="100%" fill="#777"></rect>
            </svg>
        </ChildContent>
        <CaptionContent>
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
        </CaptionContent>
    </BootstrapCarouselItem>
    <BootstrapCarouselItem>
        <ChildContent>
            <svg class="d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img"
                aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Placeholder</title>
                <rect width="100%" height="100%" fill="#666"></rect>
            </svg>
        </ChildContent>
        <CaptionContent>
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
        </CaptionContent>
    </BootstrapCarouselItem>
    <BootstrapCarouselItem>
        <ChildContent>
            <svg class="d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img"
                aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false">
                <title>Placeholder</title>
                <rect width="100%" height="100%" fill="#555"></rect>
            </svg>
        </ChildContent>
        <CaptionContent>
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
        </CaptionContent>
    </BootstrapCarouselItem>
</BootstrapCarousel>

@code {
    private BootstrapCarousel? carousel1;

    private void OnSwipeCarousel1(SwipeDirection direction)
    {
        if (direction == SwipeDirection.LeftToRight)
        {
            carousel1?.Prev();
        }
        else if (direction == SwipeDirection.RightToLeft)
        {
            carousel1?.Next();
        }
    }
}